<template>
  <div class="box">
    <div class="boxleft">
      <el-steps :active="active" direction="vertical" finish-status="success">
        <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
        <el-step title="步骤 2"></el-step>
      </el-steps>
    </div>
    <div class="bottombut">
      <keep-alive>
        <component :is="com"></component>
      </keep-alive>
      <el-button @click="next">{{ text }}</el-button>
    </div>
  </div>
</template>

<script>
import One from "./One.vue";
import Two from "./Two.vue";
import Three from "./Three.vue";
export default {
  components: {
    Three,
    One,
    Two,
  },
  data() {
    return {
      active: 0,
      com: "One",
      text: "下一步",
    };
  },
  methods: {
    next() {
      if (this.com == "One") {
        this.com = "Two";
        this.active = 1;
        // this.text = "完成";
      }
      else if (this.com == "Two") {
        this.com = "Three";
        this.active = 2;
         this.text = "完成";
      }
      else {
        // 完成后的路由地址

        this.$router.push("/home/shoplist");
      }
      // if (this.active++ > 2) this.active = 0;
    },
    // fun(val) {
    //   this.com = val;
    // },
  },
};
</script>

<style scoped>
.box {
  display: flex;
  width: 100%;
  min-height: 600px;
}
.boxleft {
  /* height: 300px; */
}
.color {
  background: orangered;
  width: 200px;
  height: 400px;
}
.bottombut {
  width: 500px;
  height: 100%;
  margin: auto;
}
</style>